<template>
  <div>
    <transition 
      @before-enter='beforeEnter'
      @enter='enter'
      @after-enter='afterEnter'>
      <div class="ball" v-show='ballFlag' ref='ball'></div>
    </transition>
    <div class="mui-card">
      <div class="mui-card-header mui-card-media" style="height:40vw">
        <mt-swipe :show-indicators="false" :auto="4000">
          <mt-swipe-item>
            <img
              src="https://img10.360buyimg.com/n7/jfs/t1/42414/34/14090/280081/5d720181Ef1fb554d/814a53bab9544bd2.jpg"
              alt="">
          </mt-swipe-item>
          <mt-swipe-item>
            <img src="https://img12.360buyimg.com/n7/jfs/t1/79105/5/1549/275769/5cfe0819E05803cb2/d56d258b14bad253.jpg"
              alt="">
          </mt-swipe-item>
          <mt-swipe-item>
            <img src="https://img13.360buyimg.com/n7/jfs/t1/48461/4/9947/224975/5d732120E5434d220/34748f89e697f22f.jpg"
              alt="">
          </mt-swipe-item>

        </mt-swipe>
      </div>

      <div class="mui-card-content">
        <div class="mui-card">
          <div class="mui-card-header">{{goodsinfo.goodsName}}</div>
          <div class="mui-card-content">
            <div class="mui-card-content-inner">
              活动价：<span>￥ {{goodsinfo.priceNew}} </span> &nbsp;&nbsp; 原价: <del>￥{{goodsinfo.priceBefore}}</del> <br> <br>
              购买数量:&nbsp; <numbox @getcount='getSelectedCount'></numbox>
              <br>
              <br>
              <button @click='addToShopCar'>加入购物车</button>
              <button class="buyNow">立即购买</button>

            </div>
          </div>
        </div>
      </div>

      <div class="mui-card-content">
        <div class="mui-card">
          <div class="mui-card-header">产品参数</div>
          <div class="mui-card-content">
          </div>
          <div class="mui-card-footer">
            <div>
              <div>商品名称：戴尔G3</div>
              <div>商品编号：100005724680</div>
              <div>商品毛重：3.42kg</div>
              <div>商品产地：中国大陆</div>
              <div>系统：Windows 10</div>
              <div>分辨率：全高清屏（1920×1080）</div>
              <div>显卡型号：GTX1650</div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import numbox from "../subcomponents/numbox.vue";

  export default {
    data() {
      return {
        id:this.$route.params.id,
        ballFlag: false,
        selectedCount: 1 ,
        goodsinfo: {
          "id": this.id,
          "goodsName" :"戴尔DELL游匣G3",
          "priceNew":"5699",
          "priceBefore" : "6999",
          "goodsImg": "https://img10.360buyimg.com/n7/jfs/t1/42414/34/14090/280081/5d720181Ef1fb554d/814a53bab9544bd2.jpg"
        },
      }
    },
    methods: {
      addToShopCar() {
        this.ballFlag = !this.ballFlag;
        var goodsinfo = {
          id: this.id,
          count: this.selectedCount,
          selected: true,
          priceNew: this.goodsinfo.priceNew,
          priceBefore: this.goodsinfo.priceBefore
        };
        // 调用 store 中的 mutations 来将商品加入car[]中
        this.$store.commit('addToCar',goodsinfo);



      },
      
      beforeEnter(el) {
        el.style.transform = "translate(0, 0)";
      },
      enter(el, done) {
        el.offsetWidth;
        // 获取小球的 在页面中的位置 getBoundingClientRect()方法返回一个数组
        const ballPosition = this.$refs.ball.getBoundingClientRect();
        // 获取 徽标 在页面中的位置
        const badgePosition = document
          .getElementById("badge")
          .getBoundingClientRect();

        const xDist = badgePosition.left - ballPosition.left;
        const yDist = badgePosition.top - ballPosition.top;

        el.style.transform = `translate(${xDist}px, ${yDist}px)`;
        el.style.transition = "all 0.5s cubic-bezier(.4,-0.3,1,.68)";
        done();
      },
      afterEnter(el) {
        this.ballFlag = !this.ballFlag;
      },
      getSelectedCount(data) {
        this.selectedCount = data;
        // console.log('父组件'+this.selectedCount);
      }
  },
  components: {
      numbox
    }
  }

</script>

<style scoped>
  .mui-card {
    border-top: 1px solid #cccccc;
  }

  .mint-swipe-items-wrap>div {
    padding-left: 70px;
  }

  .mui-card-content-inner {
    color: #666666;
  }

  .mui-card-content span {
    color: #e4393c;
  }

  .mui-card-content-inner {
    font-weight: 700;
  }

  button {
    background-color: #2196f3;
    margin: 0 10px;
    color: #ffffff;
  }

  .buyNow {
    background-color: #e4393c;
  }

  .mui-card-footer p {
    width: 100%;
    display: block;
  }

  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #e4393c;
    display: block;
    position: absolute;
    left: 154px;
    top: 337px;
    z-index: 99;
  }
</style>